<template>
  <div class="huoqipage">
     <div class="breakline">
        当前位置：账户查询>账户信息查询><span>活期账户</span>
     </div>
     <div class="formbox">
        <div class="formtitle">交易明细查询</div>
         <div class="line">
            <div class="label">
                <div class="xing">*</div>
                <div class="name">查询明细：</div>
            </div>
            <el-select v-model="mingxi" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
         </div>
         <div class="line">
              <div class="label">
                <div class="xing">*</div>
                <div class="name">起止日期：</div>
            </div>
            <div class="timebox" v-if="type==''">
                 
    <el-date-picker
      v-model="starttime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <div class="iconfont icon-rili2"></div>——
    <el-date-picker
      v-model="endtime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <div class="iconfont icon-rili2"></div>
     <el-radio-group v-model="radio">
    <el-radio :label="3">最近7天</el-radio>
    <el-radio :label="6">最近14天</el-radio>
    <el-radio :label="9">最近30天</el-radio>
  </el-radio-group>
  <div class="iconfont icon-bangzhu1"></div>
            </div>


              <div class="timebox" v-if="type=='long'">
                 
    <el-date-picker
      v-model="starttime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <div class="iconfont icon-rili2"></div>——
    <el-date-picker
      v-model="endtime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <div class="iconfont icon-rili2"></div>
     <el-radio-group v-model="radio">
    <el-radio :label="3">近90天</el-radio>
    <el-radio :label="6">近180天</el-radio>
    <el-radio :label="9">近365天</el-radio>
  </el-radio-group>
  <div class="iconfont icon-bangzhu1"></div>
            </div>
         </div>
         <div class="line" >
            <div class="label">
                交易金额：
            </div>
            <input class="jine" type="text" >——<input class="jine" type="text" >
         </div>
          <div class="line" v-if="type==''">
            <div class="label">
                交易方向：
            </div>
              <el-radio-group v-model="fangxiang">
    <el-radio :label="3">全部</el-radio>
    <el-radio :label="6">转入</el-radio>
    <el-radio :label="9">转出</el-radio>
  </el-radio-group>
         </div>
                   <div class="line" v-if="type==''">
            <div class="label">
                冲正交易：
            </div>
              <el-radio-group v-model="chongzheng">
    <el-radio :label="3">显示</el-radio>
    <el-radio :label="6">不显示</el-radio>

  </el-radio-group>
         </div>
         <div class="line">
            <div class="label">
                对方户名：
            </div>
            <input class="huming" type="text" >
            <span class="miaoshu">录入生僻字</span>
         </div>
              <div class="line">
            <div class="label">
                对方账号：
            </div>
            <input class="huming" type="text" >
           
         </div>
         <div class="line">
            <div class="label">
                交易备注：
            </div>
            <input class="huming" type="text" >
            <span class="miaoshu">录入生僻字</span>
         </div>
              <div class="line">
            <div class="label">
                交易摘要：
            </div>
            <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
           
         </div>
            <div class="line">
            <div class="label">
                起止明细编号：
            </div>
            <input class="jine" type="text" >——<input class="jine" type="text" >
             <div style=" margin-left: 2rem;" class="iconfont icon-bangzhu1"></div>
         </div >
         <div class="btnline">
            <button class="btn" @click="chaxun">确定</button>
            <button class="btn">返回</button>  
            <button class="btn" v-if="type==''" @click="looklong">查询长期</button>
             <button class="btn" v-if="type=='long'" @click="lookyibu">异步下载查询</button>
         </div>
     </div>
     <div class="tips">
<h4>温馨提示</h4>
<p>1.签约汇总记账账户仅提供历史明细查询。</p>
<p>2.当前交易明细查询页面支持查询最近十年账户明细，如需查询十年前的账户明细请联系您的开户行。</p>

</div>

  </div>
</template>

<script>
export default {
data(){
    return{
        type:'',
        starttime:'',
        endtime:'',
        mingxi:'明细',
        fangxiang:3,
        chongzheng:3
    }
},
methods:{
   getdate(date) {
    const d = new Date(date); // 可以传入 Date 对象或字符串
    const year = d.getFullYear();
    const month = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始
    const day = d.getDate().toString().padStart(2, '0');
    return `${year}${month}${day}`;
  },
    chaxun(){
    
        this.$router.push({
            path:'/getMenuInfo/list',
             query: { start: this.getdate(this.starttime), end: this.getdate(this.endtime)}
        })
    },
    looklong(){
        this.type='long'
    },
    lookyibu(){
        this.type=''
    },
}

}
</script>

<style lang='less' scoped>
.huoqipage{
    width: 100%;
    .breakline{
        width: 100%;
        display: flex;
        align-items: center;
        background: #F5F4F9;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        font-size: 0.8rem;
        padding: 0.5rem 0.3rem;
        span{
            font-weight: bold;
        }
    }
    .formbox{
      width: 100%;
      background: white;
      box-sizing: border-box;
      padding: 2rem 1rem;
      .formtitle{
        font-weight: bold;
        color: #3A353C;
        font-size: 0.95rem;
      
      }
      .line{
        display: flex;
        margin-left: 8rem;
        align-items: center;
        margin-top: 1.5rem;
        .label{
            width: 8rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .xing{
                color: red;
                margin-right: .3rem;
            }
        }
        .iconfont{
            color: #2093D6;
           
        }
        .huming{
            width: 14rem;
              height: 2.3rem;
            line-height: 2.3rem;
            border: 1px solid #cccccc;
            box-sizing: border-box;
            padding: 0 0.5rem;
        }
        .miaoshu{
        color: #2093D6;
            margin-left: 0.5rem;
        }
        .jine{
            width: 6rem;
            height: 2.3rem;
            line-height: 2.3rem;
            border: 1px solid #cccccc;
            box-sizing: border-box;
            padding: 0 0.5rem;
        }
        .timebox{
            display: flex;
            align-items: center;
            /* 去掉默认边框 */
.custom-date-picker .el-input__inner {
  border: 1px solid #409EFF; /* 自定义边框颜色 */
  border-radius: 4px;
  padding-right: 30px; /* 给右边图标留空间 */
}

/* 去掉整体外框阴影或边框 */
.custom-date-picker .el-input {
  border: none;
}

/* 图标放到右边 */
.custom-date-picker .el-input__suffix {
  right: 5px; /* 调整图标位置 */
}
.el-input__icon{
    display: none;
}

/* 可以根据需求调整高度和内边距 */
.custom-date-picker .el-input__inner::placeholder {
  color: #999;
}
            .iconfont{
                color: #2B8DC4;
                font-size: 1.5rem;
            }
        }
      }
      .btnline{
        width: 70%;
        display: flex;
        align-items: center;
        margin-top: 2rem;
        margin-left: 15rem;
        .btn{
            padding: 0 2rem;
           cursor: pointer;
            color: white;
            margin-right: 1rem;
            height: 1.8rem;
            line-height: 2rem;
            text-align: center;
            background: #2093D6;
            border: 0;
            border-radius: 0.2rem;

        }
      }
    }
    .tips{
    width: 100%;
    background:#F6FAFD;
    padding: 1rem 0.5rem;
    margin-bottom: 2rem;
   
}
.tips h4 {
color: #e7160e;

}
.tips p {
margin: 3px 0;

}
   

}
</style>